<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="title">
                    <span>{{$route.query.title}}</span>
                </div>
                <div class="content">
                    <el-form ref="form" :model="form"  class="form"  label-width="120px" >
                        <el-form-item label="编号：" >
                            <el-input v-model="form.number" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="申请日期：">
                            <el-input v-model="form.create_time" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="申请人" >
                            <el-input v-model="form.name" readonly="readonly" :maxLength='11' ></el-input>
                        </el-form-item>
                        <el-form-item label="职位：">
                            <el-input v-model="form.position_title" readonly="readonly"></el-input>
                            <!-- <el-select v-model="form.position_title" placeholder="请选择" style="width:250px">
                                <el-option
                                    v-for="item in cateList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select> -->
                        </el-form-item>
                        <el-form-item label="紧急联系电话：">
                            <el-input v-model="form.phone" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="请假类型：">
                            <el-input v-model="form.type_text" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="请假开始时间：" >
                            <el-input v-model="form.start_time" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="申请人门店：" >
                            <el-input v-model="form.title" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="请假结束时间：" >
                            <el-input v-model="form.end_time" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="总计(天)：" >
                            <el-input v-model="form.day" readonly="readonly"></el-input>
                        </el-form-item>
                         <el-form-item label="请假事由："  style="width:100%">
                            <el-input v-model="form.content" readonly="readonly" type="textarea" :rows="4" ></el-input>
                        </el-form-item>
                         <el-form-item
                            label="请假凭证"
                            style="width: 100%"
                            ref="file"
                            prop="file"
                            >
                            <vs-uploading
                                readonly="readonly"
                                width="120px"
                                v-model="form.file"
                            ></vs-uploading>
                            </el-form-item>
                        </el-form>
                        <el-table 
                        :data="tableData1"
                        style="width: 100%">
                        <el-table-column
                            prop="title"
                            label="任务名称"
                        >
                        </el-table-column>
                        <!-- <el-table-column
                            prop="status"
                            label="审批结果"
                            >
                        </el-table-column> -->
                          <el-table-column prop="status" label="审批结果">
                            <template slot-scope="scope">
                              <span>{{ scope.row.status === 1 ? "待批准" : scope.row.status === 2 ? "批准" : "驳回" }}</span>
                            </template>
                          </el-table-column>
                        <el-table-column
                            prop="examine_reason"
                            label="审批意见">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="审批人">
                        </el-table-column>
                        <el-table-column
                            prop="store"
                            label="所属组织">
                        </el-table-column>
                        <el-table-column
                            prop="position"
                            label="审批人岗位">
                        </el-table-column>
                    </el-table>
                    <div style="margin-top:40px" v-if="allData">
                         <el-button style="width:110px" @click="$router.go(-1)">返回</el-button>
                        <el-button type="danger" style="width:110px" @click="open()" v-if="allData.status==1" >驳回</el-button>
                        <el-button type="primary" style="width:110px" @click="opens()" v-if="allData.status==1" >批准</el-button>
                        <el-button type="danger" style="width:110px" v-if="allData.status==3" disabled>已驳回</el-button>
                        <el-button type="primary" style="width:110px" v-if="allData.status==2" disabled>已批准</el-button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import VsUploading from '../../components/VsUploading'
export default {
    components:{
        VsUploading
    },
    data() {
       var url = (rule, value, callback) => {
            // 图片验证
            if (!this.form.url) { //hasFmt设置为true/false
                callback(new Error("请上传图片!"));
            } else {
                callback();
            }
        }
        return {
            allData:null,
            form: {
                number:'',//编号
                create_time:'',//请假日期
                name:'',//请假人
                position_title:'',//职位
                type_text:'',//请假类型
                start_time:'',//开始时间
                end_time:'',//结束时间
                title:'',//门店
                day:'',//天数
                content:'',//请假事由
                phone:'',//电话
                id:'',
                file:'',//请假凭证
                status:''
            },
            sta:{
                id:'',
                status:'',
                content:''
            },
            tableData1:[],
            roleList: []
        }
    },
    created() {
        if (this.$route.query.id) {
            this.form.id = this.$route.query.id
            console.log(2222222,this.form.id);
            this.getLists()
            // this.leaveApproves()
        }
        this.$route.meta.title = this.$route.query.title
    },
    mounted() {
    },
    methods: {
        async getLists(){

            this.loading = true;
            let {code,data} = await this.$Http.staffleave(this.form);
            this.loading = false;
            if(code){
                this.form={
                number: data.number,
                create_time: data.create_time,
                name: data.name,
                position_title: data.position_title,
                type_text: data.type_text,
                start_time: data.start_time,
                end_time: data.end_time,
                title: data.title,
                day: data.day,
                content: data.content,
                phone: data.phone,
                file:data.file,
                id:data.id,
                },
                this.tableData1 = data.approval_info
                this.allData = data

                console.log('tableData1',this.tableData1);
                console.log('this.form',this.form);

            }
            
        },
        save() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setUserInfo(this.form)
                    if (res.status == 1) {
                        if (this.form.id) {
                            this.$message.success('编辑成功')
                        } else {
                            this.$message.success('添加成功')
                        }
                        this.$router.go(-1)
                    }
                } else {
                    return false;
                }
            });
        },

        // async leaveApproves(){
        //     this.loading = true;
        //     let {code,data} = await this.$Http.leaveApprove(this.form);
        //     this.loading = false;
        //     if(code){
        //         this.roleList = data
        //         console.log(444444444444,this.roleList);
        //     }
        // },

        open() {
        this.$prompt('回复', '驳回', {
          confirmButtonText: '确定驳回',
          cancelButtonText: '取消',
          showCancelButton: true,
        //   inputPattern: /\S/,
        //   inputErrorMessage: "请输入内容",
          beforeClose: async (action, instance, done) => {
                if (action === "confirm") {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = "执行中...";
                   this.sta.status = '3'
                    this.sta.content = instance.inputValue||"";
                    this.sta.id = this.$route.query.id
                    let {code,data} =  await this.$Http.leaveApprove(this.sta);
                    done();
                    instance.confirmButtonLoading = false;
                    if(code){
                        this.$router.go(-1)
                        console.log(222222333,this.sta);
                    }
                } else {
                    done();
                }
            },
        }).then(({ value }) => {
            this.sta.status = '3'
            this.sta.content = value
            this.sta.id = this.$route.query.id
            let {code,data} = this.$Http.leaveApprove(this.sta);
            if(code){
                this.$router.go(-1)
            console.log(222222333,this.sta);
            }
        })
      },
      opens() {
        this.$prompt('回复', '批准', {
          confirmButtonText: '确定批准',
          cancelButtonText: '取消',
          showCancelButton: true,
        //   inputPattern: /\S/,
        //   inputErrorMessage: "请输入内容",
          beforeClose:async (action, instance, done) => {
                if (action === 'confirm') {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = '执行中...';

                    this.sta.status = '2'
                    this.sta.content = instance.inputValue||"";
                    this.sta.id = this.$route.query.id
                    let {code,data} = await this.$Http.leaveApprove(this.sta);
                    done();
                    instance.confirmButtonLoading = false;
                    if(code){
                        this.$router.go(-1)
                        this.$message.success('提交成功!');
                    }
                } else {
                    done();
                }
            }
        }).then(({ value }) => {
           
        })
      },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    section {
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0 24px 20px;
            min-width: 900px;
            min-height: calc(100vh - 165px );
            .title {
                line-height: 70px;
                font-size: 18px;
                font-weight: 600;
                color: #383b40;
                .el-icon-close {
                    cursor: pointer;
                }
            }
        }
        .content {
            max-width:800px;
            height: 100%;
            .form {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}
::v-deep{
    .el-input{
        width: 250px;
    }
}
.imgbox{
    display: flex;
    flex-wrap: wrap;
    img{
        width: 180px;
        height: 180px;
        border-radius: 6px;
        margin-right: 10px;
    }
}
</style>